<script setup>
import dayjs from 'dayjs'
import { onMounted, ref, computed } from 'vue'
import { systemApi } from '@/api'
const form = ref({
  description: '',
  userName: '',
  type: '',
  result: '',
  operationTime: ''
})
const list = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
async function search() {
  const { data } = await systemApi.default.selectSysLogList({
    ...form.value,
    pageNo: currentPage.value,
    pageSize: pageSize.value
  })
  list.value = data?.list ?? []
  total.value = data?.total ?? 0
}
onMounted(() => {
  search()
})
const columns = computed(() => [
  {
    prop: 'description',
    label: '操作描述'
  },
  {
    prop: 'type',
    label: '类型'
  },
  {
    prop: 'result',
    label: '结果'
  },
  {
    prop: 'userName',
    label: '用户账号'
  },
  {
    prop: 'operationTime',
    label: '操作时间',
    formatter: row => dayjs(row.operationTime).format('YYYY-MM-DD HH:mm:ss')
  }
])
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div>日志管理</div>
    </template>
    <el-form
      :model="form"
      label-width="90px"
      label-position="left"
      label-suffix="："
    >
      <el-row :gutter="20">
        <el-col :lg="6" :md="8" :sm="12">
          <el-form-item label="操作描述" prop="description">
            <el-input v-model.trim="form.description" clearable />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="8" :sm="12">
          <el-form-item label="用户账号" prop="userName">
            <el-input v-model.trim="form.userName" clearable />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="8" :sm="12">
          <el-form-item label="类型" prop="type">
            <el-input v-model.trim="form.type" clearable />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="8" :sm="12">
          <el-form-item label="结果" prop="result">
            <el-input v-model.trim="form.result" clearable />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="8" :sm="12">
          <el-form-item label="操作时间" prop="operationTime">
            <el-date-picker
              style="width: 100%"
              v-model="form.operationTime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="datetime"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
    </el-form>
  </el-card>
  <DeTable
    :data="list"
    :columns="columns"
    v-model:pageSize="pageSize"
    v-model:currentPage="currentPage"
    :total="total"
    @onRefresh="search"
  >
  </DeTable>
</template>
